<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: YanHilin
  Date: 2020/5/17
  Time: 14:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <base href="http://localhost:8080/onlineflower/">
    <%@include file="/page/comment/head.jsp"%>
    <style type="text/css">
        .product{
            background-color: #f8d7da;
            margin: 20px auto 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .list {
            width: 26rem;
            height: 350px;
            margin-right: 10px;
            margin-top: 20px;
            margin-bottom: 20px;
            border: 1px solid darkblue;
        }
        .list .sales{
            position: absolute;
            font-size: 23px;
            color: red;
            height: 60px;
            width: 60px;
            border-radius: 50%;
            text-align: center;
            border:1px solid black;
            background-color: white;
        }
        .sales span{
            vertical-align: middle;
            line-height: 60px;
        }
        .list img{
            width: 100%;
            height: 180px;
        }
        #head{
            width: 80%;
            margin:0 auto;
            background-color: #7abaff;
        }
        .card-text{
            font-size: 21px;
        }
        .card-title{
            height: 52px;
        }
        .card-text{
            height: 41px;
        }
        .card-text span{
            color: #a71d2a;
            font-size: 25px;
        }
        .button-list{
            display: flex;
            justify-content: space-between;
        }
        .button-list button{
            border: none;
        }
        .callback{
            position: fixed;
            border: 1px solid darkblue;

            bottom: 20px;
            right: 20px;
        }
        .callback:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
<%--头部--%>
<%@include file="/page/comment/head_nav.jsp"%>
<%--轮播图--%>
<div id="head">
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"  style="height: 400px">
        <div class="carousel-inner">
            <%--特殊节日--%>
           <%-- <div class="carousel-item active" >
                <img src="static/picFlower/cmain/flmain2.jpg" class="d-block w-100" style="height: 100%">
            </div>
            <div class="carousel-item" >
                <img src="static/picFlower/cmain/flmain1.jpg" class="d-block w-100" style="height: 100%">
            </div>
            <div class="carousel-item" >
                <img src="static/picFlower/cmain/flmain3.jpg" class="d-block w-100" style="height: 100%">
            </div>
            <div class="carousel-item" >
                <img src="static/picFlower/cmain/flmain4.jpg" class="d-block w-100" style="height: 100%">
            </div>
            <div class="carousel-item" >
                <img src="static/picFlower/cmain/flmain5.jpg" class="d-block w-100" style="height: 100%">
            </div>--%>
            <%--非特殊节日--%>
            <c:forEach items="${requestScope.flowers}" var="item" begin="1" end="1">
                <div class="carousel-item active" >
                    <a href="http://localhost:8080/onlineflower/client/flowerServlet?action=showFlowerDetail&flowerid=${item.flowerid}"> <img src="static/picFlower/${item.flower_photo}" class="d-block w-100" style="height: 100%"></a>
                </div>
            </c:forEach>
            <c:forEach items="${requestScope.flowers}" var="item" begin="2" end="3">
                <div class="carousel-item" >
                    <a href="http://localhost:8080/onlineflower/client/flowerServlet?action=showFlowerDetail&flowerid=${item.flowerid}">
                    <img src="static/picFlower/${item.flower_photo}" class="d-block w-100" style="height: 100%"></a>
                </div>
            </c:forEach>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

</div>
<%--鲜花产品部分--%>
<%--<div class="wrap clearfix">
    <c:forEach items="${requestScope.flowers}" var="item" begin="1" end="10">
        <div id="list" class="card" style="width: 25rem;">
            <div style="z-index: 9999;height: 40px">
                <p style="width:40px;line-height: 40px;text-align: center;color: red;border-radius: 50%;background-color: gainsboro">${item.sales}
                </p>
            </div>
            <img style="margin-top:-40px" src="static/picFlower/${item.flower_photo}" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">${item.flower_name}</h5>
                <p class="card-text">￥：&nbsp;&nbsp;${item.price}</p>

            </div>
            <button class="showDtail input-lg" flowerid="${item.flowerid}">查看详情</button>
            <br/>
            <button style="width: 248px" flowerid="${item.flowerid}" id="cart" class="btn btn-warning cart input-lg">
                Add To Cart <span class="glyphicon glyphicon-shopping-cart"></span></button>
        </div>
    </c:forEach>
</div>--%>
<div class="product">
<c:forEach items="${requestScope.flowers}" var="item" begin="1" end="10">
    <div class="list">
        <div class="sales"><span style="letter-spacing:2px">${item.sales}</span></div>
        <img src="static/picFlower/${item.flower_photo}" alt="">
        <h5 class="card-title"><span style="letter-spacing: 2px;word-spacing: 2px">${item.flower_name}</span></h5>
        <p class="card-text">￥&nbsp;&nbsp;<span>${item.price}</span></p>
        <div class="button-list">
            <button class="showDtail input-lg" flowerid="${item.flowerid}">查看详情</button>
            <button  flowerid="${item.flowerid}" class="cart input-lg">
                Cart <span class="glyphicon glyphicon-shopping-cart"></span></button>
        </div>
    </div>
</c:forEach>
</div>
<%--脚部--%>
<div class="foot" style="background-color: #117a8b;height: 250px">
</div>
<div class="callback" >
    <img src="static/imges/icon/huidaodingbu.png" alt="">
</div>

</body>
<script>
    $(function () {
        //给加入购物车链接加入单击事件
        $("button.cart").click(function () {
            var flowerid = $(this).attr("flowerid");
            location.href = "http://localhost:8080/onlineflower/cartServlet?action=addItem&id=" + flowerid;
        });
       /* $("button.collect").click(function () {
            var flowerid = $(this).attr("flowerid");
            location.href = "http://localhost:8080/onlineflower/collectServlet?action=add&id=" + flowerid;
        })*/
        $("button.showDtail").click(function () {
            var flowerid = $(this).attr("flowerid");
            location.href = "http://localhost:8080/onlineflower/client/flowerServlet?action=showFlowerDetail&flowerid=" + flowerid;
        });
        $('.carousel').carousel();
        $('div.callback').click(function () {
                var y=window.scrollY;
                var x=window.scrollX;
                window.scrollTo(0,0);
               // alert("hello");
        });
    })
</script>
</html>
